<template>
	<view>
		<u-toast ref="uToast"></u-toast>

		<view class="trade__head u-margin-20">

			<view>
				交易总额(元)
			</view>
			<view class="trade__money">{{agentTradeData.transAmount}}</view>
		</view>
		<view class="statistic__card u-margin-20 u-padding-20 u-margin-top-30">
			<u-cell-item @click="goMyDetail()" :title-style="{ color: '#333333' }" title="拓展统计" :border-bottom="false"
				class="terminal__sub" :arrow="false">
				<u-image class="u-margin-right-10" width="10rpx" height="40rpx" slot="icon"
					src="@/static/image/home/icon_line_vertical.png"></u-image>

			</u-cell-item>
			<view class="flex justify-between flex-wrap">
				<view class="statistic__item ">
					<view class="bold">
						{{agentTradeData.merchantCount}}
					</view>
					<view class="tip">
						拓展商户（户）
					</view>
				</view>
				<view class="statistic__item ">
					<view class="bold">
						{{agentTradeData.activeMerchantCount}}
					</view>
					<view class="tip">
						激活用户
					</view>
				</view>
				<view class="statistic__item u-margin-top-30">
					<view class="bold">
						{{agentTradeData.agentCount}}
					</view>
					<view class="tip">
						拓展代理（户）
					</view>
				</view>
			</view>

		</view>
		<view class="statistic__card u-margin-20 u-padding-20">
			<u-cell-item @click="goMyDetail()" :title-style="{ color: '#333333' }" title="业绩详情(本月)"
				:border-bottom="false" class="terminal__sub" :arrow="false">
				<u-image class="u-margin-right-10" width="10rpx" height="40rpx" slot="icon"
					src="@/static/image/home/icon_line_vertical.png"></u-image>

			</u-cell-item>
			<view class="flex justify-between flex-wrap">
				<view class="statistic__item ">
					<view class="bold">
						{{agentTradeData.transAmount}}
					</view>
					<view class="tip">
						交易额度（元）
					</view>
				</view>
				<view class="statistic__item ">
					<view class="bold">
						{{agentTradeData.merchantCount}}
					</view>
					<view class="tip">
						拓展商户（户）
					</view>
				</view>
				<view class="statistic__item u-margin-top-30">
					<view class="bold">
						{{agentTradeData.agentCount}}
					</view>
					<view class="tip">
						拓展代理（户）
					</view>
				</view>
				<view class="statistic__item u-margin-top-30">
					<view class="bold">
						{{agentTradeData.activeMerchantCount}}
					</view>
					<view class="tip">
						激活商户（户）
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 声明你需要的属性
			agentNo: String
		},
		data() {
			return {

				data: {},
				agentTradeData: {},
				requestBody: {
					searchDate: ""
				},
				agentMonthTradeData: {},
			}
		},
		mounted() {
			console.log("agentNo=" + this.agentNo)
			this.agentAllAchievement();
			this.requestBody.searchDate = this.traversalTime(new Date().getTime());
			this.agentAllAchievement2();
		},
		methods: {
			agentAllAchievement() {
				const _that = this;
				_that.$zx.user_api.agentAllAchievement(_that.agentNo).then((data) => {
					console.log("data=" + JSON.stringify(data))

					_that.agentTradeData = data;

				});
			},
			agentAllAchievement2() {
				const _that = this;
				_that.$zx.user_api.agentAllAchievement2(_that.agentNo, _that.requestBody).then((data) => {
					console.log("data=" + JSON.stringify(data))

					_that.agentMonthTradeData = data;


				});
			},
			traversalTime(timestamp) {
				//timestamp(时间戳)是整数，否则要parseInt转换
				let time = new Date(timestamp);
				let y = time.getFullYear();
				let m = time.getMonth() + 1;

				return y + '-' + this.addTimes(m)
			},
			addTimes(m) {
				return m < 10 ? '0' + m : m
			},
		},
	}
</script>

<style lang="scss" scoped>
	.trade {
		&__head {

			margin-left: 10rpx;
			margin-right: 10rpx;
			text-align: center;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 200rpx;
			border-radius: 20rpx;
			background-color: #9D60FF;
			display: flex;
			flex-direction: column;
			justify-content: center;
			color: white;

		}

		&__money {
			font-size: 24px;

		}
	}

	.statistic {
		width: 100vw;
		height: 100vh;
		position: relative;
		padding: 10rpx;

		&__card {

			background-color: white;
			border-radius: 20rpx;

		}

		&__item {
			display: flex;
			flex-direction: column;
			width: 290rpx;
			height: 166rpx;
			border: 1rpx solid #e5e5e5;
			border-radius: 10rpx;
			text-align: center;
			justify-content: center;

		}
	}
</style>